<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/montage-serialization">
        {
            "owner": {
                "values": {
                    "element": {"#": "main"},
                    "listItem38": {"@": "listItem38"}
                }
            },

            "listItem": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem"},
                    "label": "Item 1"
                }
            },

            "listItem2": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem2"},
                    "label": "Item 2",
                    "isExpandable": true
                }
            },

            "listItem3": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem3"},
                    "label": "Item 3",
                    "description": "description"
                }
            },

            "listItem4": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem4"},
                    "label": "Item 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit.",
                    "description": "description"
                }
            },

            "listItem5": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem5"},
                    "label": "Item 5",
                    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit."
                }
            },

            "listItem6": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem6"},
                    "label": "Item 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit.",
                    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit."
                }
            },

            "listItem7": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem7"},
                    "label": "Item 7",
                    "isExpandable": true,
                    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit."
                }
            },

            "listItem8": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem8"},
                    "label": "Item 8",
                    "value": true,
                    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit."
                }
            },

             "listItem9": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem9"},
                    "label": "Item 9",
                    "value": true,
                    "isExpandable": true,
                    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tempor leo ultricies, accumsan arcu in, sollicitudin purus. Curabitur est lorem, ornare quis ipsum ac, auctor semper nisl. Proin a elit enim Suspendisse vitae leo sed orci hendrerit gravida. Cras imperdiet nunc eu tortor malesuada lobortis. Cras mattis, metus nec suscipit."
                }
            },

            "listItem10": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem10"},
                    "label": "Item 10",
                    "description": "description + isExpandable set to true",
                    "isExpandable": true
                }
            },

            "listItem11": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem11"},
                    "label": "Item 11",
                    "description": "description + descriptionPosition set to bottom",
                    "descriptionPosition": "bottom"
                }
            },

            "listItem12": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem12"},
                    "label": "Item 12",
                    "description": "description + descriptionPosition set to bottom + isExpandable set to true",
                    "isExpandable": true,
                    "descriptionPosition": "bottom"
                }
            },

            "listItem13": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem13"},
                    "label": "Item 13",
                    "value": true
                }
            },

            "listItem14": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem14"},
                    "label": "Item 14",
                    "value": false
                }
            },

            "listItem15": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem15"},
                    "label": "Item 15",
                    "value": {"<->": "!!@owner.item15Value"},
                    "description":  {"<-": "!!@owner.item15Value ? 'ON' : 'OFF'"}
                }
            },

            "listItem16": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem16"},
                    "label": "Item 16",
                    "value": {"<->": "!!@owner.item16Value"},
                    "description":  {"<-": "!!@owner.item16Value ? 'ON' : 'OFF'"},
                    "descriptionPosition": "bottom"
                }
            },

            "listItem17": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem17"},
                    "label": "Item 17",
                    "value": {"<->": "!!@owner.item17Value"},
                    "description":  {"<-": "!!@owner.item17Value ? 'ON' : 'OFF'"},
                    "descriptionPosition": "bottom",
                    "isExpandable": true
                }
            },

            "listItem18": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem18"},
                    "label": "Item 18",
                    "value": {"<->": "!!@owner.item18Value"},
                    "description":  {"<-": "!!@owner.item18Value ? 'ON' : 'OFF'"},
                    "isExpandable": true
                }
            },

            "listItem23": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem23"},
                    "label": "Item 23",
                    "iconSrc": "../../../test/mocks/data/icons/svgs/logistics.svg",
                    "description": "description + icon src"
                }
            },

            "listItem24": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem24"},
                    "label": "Item 24",
                    "iconComponentModule": {
                        "%": "montage/test/mocks/data/icons/department.reel"
                    },
                    "description": "description + icon module"
                }
            },

            "listItem25": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem25"},
                    "label": "Item 25",
                    "value": {"<->": "!!@owner.item25Value"},
                    "description":  {"<-": "!!@owner.item25Value ? 'ON' : 'OFF'"},
                    "toggleComponentModule": {
                        "%": "montage/test/mocks/data/icons/check.reel"
                    }
                }
            },

            "listItem26": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem26"},
                    "label": "Item 26",
                    "active": true
                }
            },

            "listItem27": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem27"},
                    "label": "Item 27",
                    "selected": true
                }
            },

            "listItem28": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem28"},
                    "data": {"<-": "@owner.employees[0]"}
                }
            },

            "listItem29": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem29"},
                    "data": {"<-": "@owner.employees[1]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem30": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem30"},
                    "data": {"<-": "@owner.customers[0]"}
                }
            },

            "listItem31": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem31"},
                    "data": {"<-": "@owner.departments[0]"}
                }
            },

            "listItem32": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem32"},
                    "data": {"<-": "@owner.departments[1]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem33": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem33"},
                    "data": {"<-": "@owner.settings[1]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem34": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem34"},
                    "data": {"<-": "@owner.settings[2]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem35": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem35"},
                    "data": {"<-": "@owner.employees[2]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem36": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem36"},
                    "data": {"<-": "@owner.employees[3]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem37": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem37"},
                    "data": {"<-": "@owner.employees[4]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem38": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem38"},
                    "data": {"<-": "@owner.settings[1]"},
                    "delegate": {"=": "@owner"}
                }
            },

            "listItem39": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem39"},
                    "data": {"<-": "@owner.stores[0]"}
                }
            },

            "listItem40": {
                "prototype": "montage/ui/list-item.reel",
                "values": {
                    "element": {"#": "listItem40"},
                    "data": {"<-": "@owner.check"},
                    "delegate": {"=": "@owner"}
                }
            }

        }
    </script>
</head>
<body>
    <div data-montage-id="main" class="Main">
        <header>List Item Samples</header>
        <h4>list items </h4>
        <div data-montage-id="listItem"></div>
        <div data-montage-id="listItem2"></div>
        <div data-montage-id="listItem3"></div>
        <div data-montage-id="listItem4"></div>
        <div data-montage-id="listItem5"></div>
        <div data-montage-id="listItem6"></div>
        <div data-montage-id="listItem7"></div>
        <div data-montage-id="listItem8"></div>
        <div data-montage-id="listItem9"></div>
        <div data-montage-id="listItem10"></div>
        <div data-montage-id="listItem11"></div>
        <div data-montage-id="listItem12"></div>
        <div data-montage-id="listItem13"></div>
        <div data-montage-id="listItem14"></div>
        <div data-montage-id="listItem15"></div>
        <div data-montage-id="listItem16"></div>
        <div data-montage-id="listItem17"></div>
        <div data-montage-id="listItem18"></div>
        <div data-montage-id="listItem19"></div>
        <div data-montage-id="listItem20"></div>
        <div data-montage-id="listItem21"></div>
        <div data-montage-id="listItem22"></div>
        <div data-montage-id="listItem23"></div>
        <div data-montage-id="listItem24"></div>
        <div data-montage-id="listItem25"></div>
        <div data-montage-id="listItem26"></div>
        <div data-montage-id="listItem27"></div>

        <h4>list items with object descriptor</h4>
        <div data-montage-id="listItem28"></div>
        <div data-montage-id="listItem29"></div>
        <div data-montage-id="listItem30"></div>
        <div data-montage-id="listItem31"></div>
        <div data-montage-id="listItem32"></div>
        <div data-montage-id="listItem33"></div>
        <div data-montage-id="listItem34"></div>
        <div data-montage-id="listItem35"></div>
        <div data-montage-id="listItem36"></div>
        <div data-montage-id="listItem37"></div>
        <div data-montage-id="listItem38"></div>
        <div data-montage-id="listItem39"></div>
        <div data-montage-id="listItem40"></div>

    </div>
</body>
</html>
